import React, { Component } from 'react';
import '../css/Work.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from  'axios'
import HeaderImg from  './HeaderImg'
import  Create from  './CreateComponent'
import Dibu from './dibu'
@observer class Work extends Component {
    constructor(props) {
        super(props)
        this.state={
            detail:{},
            items:[],
            size:'',
            total:'',
            Array:[],
            intervaling:''
        }
    }
    componentDidMount(){
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/authentication/findByid.jhtml?mid='+this.props.match.params.id)
            .then((item)=>{
                this.setState({
                    detail:item.data,
                    items:[item.data.teamName,item.data.pnumber]
                })
            })
        axios.get('http://www.niuduxiu.com/authentication/findcreativity.jhtml?zid='+this.props.match.params.id+'&pageSize=8&pageNumber=1')
            .then((item)=>{
                    this.setState({
                        Array:item.data.cindex,
                        total:item.data.totalPage,
                        size:item.data.pageNumber
                    },()=>{
                        this.interval();
                    })
            })
    }
    interval(){
        if(this.state.total<=this.state.size){
            return false;
        }else{
            this.intervaling=setInterval(()=>{
                if((document.documentElement.scrollTop||document.body.scrollTop)-document.body.scrollHeight>=-1000){
                    clearInterval( this.intervaling)
                    this.setState({
                        size:this.state.size+1
                    },()=>{
                        this.loading()
                    })
                }
            },500)
        }
    }
    loading(){
        axios.get('http://www.niuduxiu.com/authentication/findcreativity.jhtml?zid='+this.props.match.params.id+'&pageSize=8&pageNumber='+this.state.size)
            .then((item)=>{
                this.setState({
                    Array:this.state.Array.concat(item.data.cindex),
                    total:item.data.totalPage,
                    size:item.data.pageNumber
                },()=>{
                    this.interval();
                })
            })
    }
    render() {
        return (
            <div>
                <div className="Work">
                    <HeaderImg  items={this.state.items} img={this.state.detail.raddress}  />
                    <p className='title' style={{display:this.props.match.params.type==2?'block':'none'}}>核心人物</p>
                    <div className='hexinrenwu' style={{display:this.props.match.params.type==2?'block':'none'}}>
                        <div className='left'>
                            <img src={this.state.detail.pphoto} alt=""/>
                        </div>
                        <div className='right'>
                           <p>{this.state.detail.rname}</p>
                           <p>{this.state.detail.rnickname}</p>
                        </div>
                    </div>
                    <p className='title'>{this.props.match.params.type==1?'工作室':'工作坊'}介绍</p>
                    <div className='content'>{this.state.detail.rintroduction}</div>
                    <p className='title'>TA们的创意</p>
                    <Create Array={this.state.Array}  />
                </div>
                <Dibu size={this.state.size} total={this.state.total}  />
            </div>
        );
    }
}

export default Work;
